import React, { Component } from 'react';
import { connect } from 'react-redux';
import { 
  Card, 
  List, 
  Avatar, 
  Button, 
  Space,
  Divider,
  Toast 
} from 'antd-mobile';
import { 
  UserOutline, 
  SetOutline, 
  MessageOutline, 
  HeartOutline,
  ShopbagOutline,
  AppOutline 
} from 'antd-mobile-icons';
import PropTypes from 'prop-types';
import { logout } from '../../store/reducers/userReducer';
import styles from './UserProfile.module.less';

class UserProfile extends Component {
  static propTypes = {
    userInfo: PropTypes.object,
    isLoggedIn: PropTypes.bool,
    logout: PropTypes.func.isRequired,
  };

  static defaultProps = {
    userInfo: null,
    isLoggedIn: false,
  };

  handleLogout = () => {
    const { logout } = this.props;
    logout();
    Toast.show('已退出登录');
  };

  handleMenuClick = (menu) => {
    Toast.show(`点击了${menu.title}`);
  };

  render() {
    const { userInfo, isLoggedIn } = this.props;

    const menuItems = [
      { key: 'orders', title: '我的订单', icon: <ShopbagOutline />, arrow: true },
      { key: 'favorites', title: '我的收藏', icon: <HeartOutline />, arrow: true },
      { key: 'messages', title: '消息中心', icon: <MessageOutline />, arrow: true },
      { key: 'settings', title: '设置', icon: <SetOutline />, arrow: true },
    ];

    if (!isLoggedIn) {
      return (
        <div className={styles.container}>
          <div className={styles.loginPrompt}>
            <Avatar 
              src="https://via.placeholder.com/80" 
              style={{ '--size': '80px' }}
            />
            <h2 className={styles.loginTitle}>请先登录</h2>
            <p className={styles.loginSubtitle}>登录后查看个人信息</p>
            <Button 
              color="primary" 
              size="large"
              onClick={() => window.location.href = '/'}
            >
              去登录
            </Button>
          </div>
        </div>
      );
    }

    return (
      <div className={styles.container}>
        <div className={styles.header}>
          <Card className={styles.userCard}>
            <div className={styles.userInfo}>
              <Avatar 
                src={userInfo.avatar} 
                style={{ '--size': '60px' }}
              />
              <div className={styles.userDetails}>
                <h3 className={styles.userName}>{userInfo.name}</h3>
                <p className={styles.userPhone}>{userInfo.phone}</p>
              </div>
            </div>
          </Card>
        </div>

        <div className={styles.content}>
          <Card title="功能菜单" className={styles.menuCard}>
            <List>
              {menuItems.map((item, index) => (
                <React.Fragment key={item.key}>
                  <List.Item
                    prefix={item.icon}
                    arrow={item.arrow}
                    onClick={() => this.handleMenuClick(item)}
                    className={styles.menuItem}
                  >
                    {item.title}
                  </List.Item>
                  {index < menuItems.length - 1 && <Divider />}
                </React.Fragment>
              ))}
            </List>
          </Card>

          <Card title="应用信息" className={styles.infoCard}>
            <Space direction="vertical" style={{ width: '100%' }}>
              <div className={styles.infoItem}>
                <span className={styles.infoLabel}>应用版本:</span>
                <span className={styles.infoValue}>v1.0.0</span>
              </div>
              <div className={styles.infoItem}>
                <span className={styles.infoLabel}>React版本:</span>
                <span className={styles.infoValue}>18.2.0</span>
              </div>
              <div className={styles.infoItem}>
                <span className={styles.infoLabel}>构建时间:</span>
                <span className={styles.infoValue}>2024-01-01</span>
              </div>
            </Space>
          </Card>

          <div className={styles.logoutSection}>
            <Button 
              color="danger" 
              size="large" 
              block
              onClick={this.handleLogout}
            >
              退出登录
            </Button>
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  userInfo: state.user.userInfo,
  isLoggedIn: state.user.isLoggedIn,
});

const mapDispatchToProps = {
  logout,
};

export default connect(mapStateToProps, mapDispatchToProps)(UserProfile);
